<template>
	<view>
		<view class="block-view">
            <view>
                <text class="title">物流公司：</text>
                <text class="text">{{express.name}}</text>
            </view>
            <view class="u-margin-top-10">
                <text class="title">物流单号：</text>
                <text class="text">{{express.courier_num}}</text>
            </view>
        </view>
        <view class="express-view u-margin-top-20">
            <u-empty v-if="this.$u.test.isEmpty(express.data)" text="暂无物流信息，请您耐心等待~" mode="list"></u-empty>
            <u-time-line>
                <u-time-line-item v-for="(item,index) in express.data">
                    <template v-slot:content>
                        <view>
                            <view class="u-order-desc">{{item.context}}</view>
                            <view class="u-order-time">{{item.time}}</view>
                        </view>
                    </template>
                </u-time-line-item>
            </u-time-line>
        </view>
	</view>
</template>

<script>
    import * as API_Order from '@/api/order.js'
    import * as API_Trade from '@/api/trade.js'

	export default {
		data() {
			return {
                express:{}
			};
		},
        onLoad(options) {
            const { logi_id, ship_no } = options
            API_Trade.getExpress(logi_id, ship_no).then(response => {
                this.express = response
            })
        }
	}
</script>

<style lang="scss">
    .block-view {
        background-color: #FFFFFF;
        height: 120rpx;
        padding: 10rpx 20rpx;
        .title {
            font-size: 30rpx;
            color: $u-tips-color;
        }
        .text {
            font-size: 30rpx;
            font-weight: 600;
        }
    }
    .express-view {
        background-color: #FFFFFF;
        padding: 10rpx 50rpx;
    }
    .u-node {
    		width: 44rpx;
    		height: 44rpx;
    		border-radius: 100rpx;
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		background: #d0d0d0;
    	}

    	.u-order-title {
    		color: #333333;
    		font-weight: bold;
    		font-size: 32rpx;
    	}

    	.u-order-desc {
    		color: rgb(150, 150, 150);
    		font-size: 28rpx;
    		margin-bottom: 6rpx;
    	}

    	.u-order-time {
    		color: rgb(200, 200, 200);
    		font-size: 26rpx;
    	}
</style>
